<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-ua-compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width,initial-scale=1.0">
		<title></title>
		<style>
			body,p{
				margin:0;
				padding:0;
			}
			.container{
				float:right;
				margin:50px auto;
				width:1500px;
				height:406px;
				background: pink url('images/dlbg.jpg') no-repeat;
				background-size:contain;
			}
			.container .form{
				margin:40px 250px;
				float:right;
				width:280px;
				height:330px;
				background-color:#f5eae9;
			}
			.container .form .part1{
				height:235px;
				border-bottom:1px dashed #ccc;
			/* 	background-color: green; */
			}
			.container .form .zhanghao{
				position:relative;
				top:30px;
				left:45px;
				width:200px;
				height:20px;
				border:0;
				background-image: url('images/zhanghao.jpg');
				background-repeat: no-repeat;
				background-size: 26px 26px;
				font-size:10px;
				text-indent:38px;
				line-height:20px;
			}
			.container .form .mima{
				margin-top:20px;
				position:relative;
				top:30px;
				left:45px;
				width:200px;
				height:20px;
				border:0;
				background-image: url('images/mima.jpg');
				background-repeat: no-repeat;
				background-size: 26px 26px;
				font-size:10px;
				text-indent:38px;
				line-height:20px;
			}
			.container .form .list1{
				position:relative;
				top:55px;
				left:45px;
				width:200px;
				height:20px;
			/* 	background-color: pink; */
				vertical-align:middle;
			}
			.container .form .list1 span{
				font-size:10px;
				line-height:20px;
				vertical-align:middle;
			
			}
			.container .form .list1 .text1{
				margin-left:20px;
				color:gray;
			}
			.container .form .list1 .text2{
				margin:0 5px;
				color:gray;
			}
			.container .form .list2{
				position:relative;
				top:80px;
				left:15px;
				cursor:pointer;
			}
			.container .form .part2{
				height:45px;
			/* 	background-color: pink; */
			}
			.container .form .part2 p{
				line-height:45px;
				font-size:13px;
				text-indent:20px;
			}
			.container .form .part2 .tp1{
				position:relative;
				top:-35px;
				left:145px;
			}
			.container .form .part2 .tp2{
				position:relative;
				top:-35px;
				left:150px;
				
			}
			.container .form .part2 .tp3{
				position:relative;
				top:-35px;
				left:155px;
				
			}
		</style>
	</head>
	<body>
		<div class="container">

			<div class="form">
				<div class="part1">
					<input class='zhanghao' type="text" name='txt' placeholder='用户名/邮箱地址/手机号'>
					<input class='mima' type="password" name='password' placeholder='填写密码' >
					<div class='list1'>
						<input type="checkbox" name='submit'>
						<span>记住账号</span>
						<span class='text1'>欢迎注册</span>
						<span class='text2'>忘记密码？</span>
					</div>
					<div class="list2">
						<img src="images/but.jpg" alt="">
					</div>
				</div>
				<div class="part2">
					<p>合作网站账号登录：</p>
					<span class='tp1'>
						<img width='23' height='23' src="images/weixin.png" alt="">
					</span>
					<span class='tp2'>
						<img width='23' height='23' src="images/qqlogin.png" alt="">
					</span>
					<span class='tp3'>
						<img width='23' height='23' src="images/taobao.png" alt="">
					</span>
				</div>
			</div>
		</div>
	</body>
</html>
